<!DOCTYPE HTML>
<html>
<head>

	<title>Tinting</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #000000;
		}

		.rendererView {
			position: absolute;
			display: block;
			width: 100%;
			height: 100%;
		}
	</style>
	
	<script src="../../bin/pixi.js"></script>

</head>
<body>

	<script>
	var viewWidth = 630;
	var viewHeight = 410;

	// Create a pixi renderer
	var renderer = PIXI.autoDetectRenderer(viewWidth, viewHeight);
	renderer.view.className = "rendererView";
	
	// add render view to DOM
	document.body.appendChild(renderer.view);

	// create an new instance of a pixi stage
	var stage = new PIXI.Stage(0xFFFFFF);

	// create a background texture
	var pondFloorTexture = PIXI.Texture.fromImage("BGrotate.jpg");
	
	// create an array to store a reference to the fish in the pond
	var dudeArray = [];
	
	var totalDudes = 20;
	for (var i = 0; i < totalDudes; i++) 
	{
		// create a new Sprite that uses the image name that we just generated as its source
		var dude =  PIXI.Sprite.fromImage("eggHead.png");

		// set the anchor point so the the dude texture is centerd on the sprite
		dude.anchor.x = dude.anchor.y = 0.5;

		// set a random scale for the dude - no point them all being the same size!
		dude.scale.x = dude.scale.y = 0.8 + Math.random() * 0.3;
		
		// finally lets set the dude to be a random position..
		dude.position.x = Math.random() * viewWidth;
		dude.position.y = Math.random() * viewHeight;
	
		// time to add the dude to the pond container !
		stage.addChild(dude);

		dude.tint = Math.random() * 0xFFFFFF;

		// create some extra properties that will control movement
		// create a random direction in radians. This is a number between 0 and PI*2 which is the equivalent of 0 - 360 degrees
		dude.direction = Math.random() * Math.PI * 2;

		// this number will be used to modify the direction of the dude over time
		dude.turningSpeed = Math.random() - 0.8;

		// create a random speed for the dude between 0 - 2
		dude.speed = 2 + Math.random() * 2;	

		// finally we push the dude into the dudeArray so it it can be easily accessed later
		dudeArray.push(dude);
	}

	// create a bounding box box for the little dudes 
	var dudeBoundsPadding = 100;
	var dudeBounds = new PIXI.Rectangle(-dudeBoundsPadding,
										-dudeBoundsPadding, 
										viewWidth + dudeBoundsPadding * 2, 
										viewHeight + dudeBoundsPadding * 2);

	var tick = 0;
	requestAnimationFrame(animate);

	function animate() 
	{
		// iterate through the dude and update the positiond
		for (var i = 0; i < dudeArray.length; i++) 
		{
			var dude = dudeArray[i];
			dude.direction += dude.turningSpeed * 0.01;
			dude.position.x += Math.sin(dude.direction) * dude.speed;
			dude.position.y += Math.cos(dude.direction) * dude.speed;
			dude.rotation = -dude.direction - Math.PI / 2;

			// wrap the dudes by testing their bounds..
			if (dude.position.x < dudeBounds.x)
				dude.position.x += dudeBounds.width;
			else if (dude.position.x > dudeBounds.x + dudeBounds.width)
				dude.position.x -= dudeBounds.width;
			
			if (dude.position.y < dudeBounds.y)
				dude.position.y += dudeBounds.height;
			else if (dude.position.y > dudeBounds.y + dudeBounds.height)
				dude.position.y -= dudeBounds.height;
		}
		
		// increment the ticker
		tick += 0.1;
		
		// time to render the state!
	    renderer.render(stage);
	    
	    // request another animation frame..
	    requestAnimationFrame(animate);
	}
	</script>

	</body>
</html>
